<html>
   <head>
      <script src="../../../Grid/GridE.js"> </script>
      <script src="Excel.js"> </script>
      <link href="Excel.css" rel="stylesheet">
      <title>MS Excel sheet online by JavaScript component | TreeGrid</title>
      <meta name="description" content="Add full featured and customizable Microsoft Excel sheet to your web pages to let your user to view, create, edit and save their data in grid" />
   </head>
    <body class="Example">
      <style>
         /* Examples shared styles */
         .Example h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
         .Example h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
         .Example h3,.Example h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
         .Example h3 { background:#EE9; border:1px solid #DD8; }
         .Example h4 { background:#BDE; border:1px solid #ACD; }
         .Example a { text-decoration:underline; }      
         .Example li { padding-bottom:8px; }
         .Example ul { margin:6px 0px 0px 20px; font:13px Arial; }
         .Example .Err { margin:50px auto 10px auto; padding:5px; line-height:30px; border:1px solid black; color:red; width:800px; text-align:center; display:none; }
         .Example .Desc { margin:0px 5px 5px 5px; padding:10px; border:1px solid #dfdfdf; }
         .Example .Desc > ul { margin-left:0px; padding:0px 0px 0px 15px; clear:both; }
         .Example .Desc b { color:#0585B9; }
         .Example .Path { font:normal 12px Arial; color:#0585B9; }
         .Example .Path b { color:#D73938; }
         .Example .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
         .Example .Path i { color:black; font-style:normal; font-weight:bold; }
         .Example .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
         .Example .Border { margin:0px 5px 15px 5px; }
         .Example .Main { }
         @media (max-height:800px) { 
            .Example .Desc { padding:5px;  } 
            .Example .Desc * { font-size:12px; }
            .Example .Border { margin-bottom:5px; }
            .Example h1 { font:20px Arial; padding:0px; }
            .Example h2 { display:none; }
            .Example .Desc select { font-size:10px; line-height:10px; }
            }
         .Button { padding-left:22px; background-size:16px 16px; background-position:center center; background-repeat:no-repeat; cursor:pointer; }

      </style>
      <center class="Path"><script>document.write(location.href.replace(/(.*)(\/ExamplesPDF\/)([^\/]+)\/([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/<i>$4</i>/$5").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
      <h1>Microsoft Excel sheet - PDF export</h1>
      <div class="Err">
         <script> if(location.protocol=="file:") document.write("<style>.Example .Desc, .Example .Border {display:none;} .Example .Err { display:block; } </style>"); </script>
         Do <b>not</b> run this file locally!<br />Run it from your local or remote web http server where is installed IIS and ASP.NET (1.0, 1.1, 2.0, 3.0, 3.5, 4.0, 4.5, ...).<br>
      </div>
      <div class="Desc">
         <b>Drop any .xlsx file to the grid to open and edit it here! Or open any .xlsx file from your disk by click to<span class="TWToolImport Button" onclick="Grids.Excel.ActionImport();"></span> icon on toolbar. </b><br />
         <i>The xlsx files can be opened, edited and saved (by<span class="TWToolExport Button" onclick="Grids.Excel.ActionExport();"></span> icon) directly in browser, without any communication with server!</i><br />
         Basic MS Excel sheet look, cursor, navigation, editing, selecting, copying, moving, filling, resizing, pasting and cell span. <br />
         Configuring key and mouse action schema, dynamic cell styles and borders, outside editing, auto generating pages.<br />
         Enter formulas starting by =; e.g. =sum(E5:H12); available functions:
         <script>
         function StartExample(){
            var F = {
               Conditional:"auto,if,ifs,switch,choose,iferror,ifna",
               Lookup:"auto,match,lookup,vlookup,hlookup",
               Reference:"auto,index,offset,column,columns,row,rows,address",
               Logical:"auto,and,or,xor,not,delta,gestep,true,false",
               Bit:"40px,bitand,bitor,bitxor,bilshift,bitrhisft",
               Informational:"auto,isblank,iserror,iserr,isna,islogical,isnumber,istext,isnontext,isref,isformula,iseven,isodd,type,formulatext",
               Math:"55px,abs,sign,log,ln,log10,exp,power,sqrt,sqrtpi,fact,factdouble,gcd,lcm,combin,combina,permut,permutationa,quotient,mod,rand,random",
               Trigonometry:"auto,pi,degrees,radians,sin,sinh,cos,cosh,tan,tanh,asin,asinh,acos,acosh,atan,atanh,atan2,sec,sech,csc,csch,cot,coth,acot,actoh",
               Rounding:"85px,round,rounddown,roundup,trunc,ceiling,ceiling.math,ceiling.precise,floor,floor.math,floor.precise,mround,int",
               Conversion:"auto,decimal,base,bin2dec,oct2dec,hex2dec,dec2bin,dec2oct,dec2hex,bin2oct,bin2hext,oct2bin,oct2hex,hex2bin,hex2oct",
               String:"60px,text,dollar,fixed,t,n,value,numbervalue,exact,len,char,unichar,code,unicode,concat,concatenate,textjoin,rept,search,find,substitute,replace,mid,left,right,lower,upper,proper,clean,trim",
               Date:"55px,date,time,datevalue,timevalue,days,edate,eomonth,now,today,year,month,day,weekday,weeknum,isoweeknum,hour,minute,second",
               Summary:"85px,sum,sumsq,sumproduct,sumif,sumifs,sumx2my2,sumx2py2,sumxmy2,seriessum,count,counta,countblank,countif,countifs,max,maxa,maxifs,min,mina,minifs,large,small,rank,rank.eq,rank.avg,percentrank,percentrank.inc,percentrank.exc,percentile,percentile.inc,percentile.exc,quartile,quartile.inc,quartile.exc,product,multinominal,subtotal,aggregate,mdeterm",
               Statistic:"75px,average,averagea,averageif,averageifs,trimmean,geomean,harmean,median,mode,mode.sngl,avedev,devsq,stdev,stdeva,stdevp,stdevpa,stdev.s,stdev.p,var,vara,varp,varpa,var.s,var.p,covar,covariance.s,covariance.p,forecast,forecast.linear,intercept,slope,stexy"
               }
            var s = "";
            for(var f in F){
               var A = F[f].split(",");
               s += "<select style='width:"+A[0]+";'><option>"+f+"</option>";
               for(var i=1;i<A.length;i++) s += "<option>"+A[i]+"</option>";
               s += "</select>";
               }
            document.write(s);
            }
         StartExample();
         </script>
      </div>
      <center class="Border">
         <div class="Main">
            <bdo Debug="problem" SuppressMessage="4" 
               Layout_Url="ExcelDef.xml" Layout_Static="ExcelDef" Data_Url="Excel.xlsx" Data_Format="xlsx"
               Export_Url="../Export.aspx"
               ExportPDF_Url="../ExportPdf.aspx" ExportPDF_Type="Settings,Data,NoFormula" ExportPDF_Param_Source="Excel/ExcelExportPDF.html"
               Upload_Tag="Debug" Upload_Xml="1" Upload_Type="Cells,EditAttrs,Index,NoEmpty"
               ></bdo>
         </div>
      </center>
      <div class="Desc">
         <button onclick='Grids[0].ActionExportPDF();'>Print to PDF</button>
         <button onclick='Grids[0].ActionPrint();'>Print to printer</button>
         <button onclick='Grids[0].ExportFormat="xlsx"; Grids[0].ActionExport()'>Export to XLSX</button>
         <button onclick='Grids[0].ExportFormat="xls"; Grids[0].ActionExport()'>Export to old XLS (XHTML)</button>
         <button onclick='Grids[0].ExportFormat="csv"; Grids[0].ActionExport()'>Export to CSV</button>
      </div>

      <!-- Google Analytics code run once for trial -->
      <script>
         var TGTrial = document.cookie.match(/TGPDFCS\s*=\s*(\d+)/), TGIndex = 512;
         if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
            var n = "RunPdfCSExcel", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGPDFCS="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
            var u = document.cookie.match(/TGPDFUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGPDFUsed="+u+";path=/;expires="+d;
            var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
                 +(u==1||u==3||u==5||u==10?"UsedPdf"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
            var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
            },100);
      </script>
   </body>
</html>
